<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>投票数据柱状图</title>
    <script src="/javascripts/zepto.min.js"></script>
    <script src="/javascripts/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            rigth: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="chart-container"></div>
<script>
    $(function() {
        // 获取数据
        $.get(`/vote/index/data?limit=100&offset=0`, function(response) {
            console.log('API Response:', response);
            response = JSON.parse(response);
            if(response || response.errno === 0) {
                try {
                    // 初始化echarts实例
                    var chart = echarts.init(document.getElementById('chart-container'));

                    // 确保数据存在
                    if(!response.data || !response.data.objects) {
                        console.error('Invalid data format');
                        return;
                    }

                    // 处理数据
                    const xData = response.data.objects.map(item => item.username || '用户' + item.id);
                    const yData = response.data.objects.map(item => item.vote || 0);

                    // 设置图表配置项
                    var option = {
                        title: {
                            text: '投票数据统计',
                            textStyle: {
                                fontSize: 14
                            }
                        },
                        tooltip: {},
                        legend: {
                            data: ['票数']
                        },
                        xAxis: {
                            type: 'category',
                            data: xData,
                            axisLabel: {
                                rotate: 30,
                                interval: 0,
                                fontSize: 10
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '票数',
                            type: 'bar',
                            data: yData,
                            itemStyle: {
                                color: '#1890ff'
                            }
                        }]
                    };

                    // 使用配置项显示图表
                    chart.setOption(option);

                    // 窗口大小变化时重绘图表
                    window.addEventListener('resize', function() {
                        chart.resize();
                    });
                } catch (e) {
                    console.error('Chart render error:', e);
                }
            } else {
                console.error('API Error:', response.msg);
            }
        }, function(err) {
            console.error('API Request failed:', err);
        });
    });
</script>
</body>
</html>
